<template>
  <div>
    <el-page-header
      :title="$t('common.back')"
      :content="$t('modules.report.report_detail')"
      style="margin-bottom: 20px"
      @back="back"
    />
    <div
      v-loading.fullscreen.lock="loading"
      style="display: flex; margin-top: 10px"
    >
      <div
        class="left"
        style="display: inline-block; width: 75%; margin-right: 5px"
      >
        <el-card style="margin-bottom: 10px" shadow="never">
          <div
            v-if="confirmState === 3 || confirmState === 4"
            style="display: inline-block; margin-bottom: 30px; width: 100%"
          >
            <div
              style="
                display: inline-block;
                font-size: 16px;
                color: #9ea9b4;
                width: 95%;
              "
            >
              {{ $t('modules.report.reject_reason') }}:{{ rejectReason }}
            </div>
            <!-- <el-tooltip effect="dark" :content="$t('modules.report.generate_report')" placement="top" >
                <el-button v-permission="{permission:'10401004.MANAGE'}" v-if="confirmState===4" type="primary" size="small" icon="el-icon-refresh" @click="regenerateReport"></el-button>
              </el-tooltip> -->
          </div>
          <div class="reportSpan">
            <div class="reportSpanItem">
              {{ $t('common.status') }}:
              <el-tag
                size="small"
                :type="formatReportState(confirmState)"
                style="margin-left: 10px"
              >
                {{
                  confirmState
                    ? $t(
                        'modules.report.status_option[' +
                          confirmState +
                          '].label'
                      )
                    : '-'
                }}
              </el-tag>
            </div>
            <div class="reportSpanItem">
              {{ $t('common.month') }}:
              <el-select
                v-model="statisticMonth"
                size="small"
                @change="getReportDetailByMonth"
              >
                <el-option
                  v-for="item in monthList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <!--              <el-tag style="margin-left:10px" size="small"> {{ statisticMonth }}</el-tag>-->
            </div>
            <div class="reportSpanItem" @click="openCustomerList">
              {{ $t('common.customer_name') }}:
              <span style="cursor: pointer; color: #00c9a7">{{
                userName
              }}</span>
            </div>
            <div v-if="confirmState === 1" class="reportSpanItem">
              {{ $t('modules.report.confirm_time') }}: {{ confirmTime }}
            </div>
            <div v-if="confirmState === 2" class="reportSpanItem">
              {{ $t('modules.report.Over_time') }}: {{ confirmTime }}
            </div>
            <div v-if="confirmState === 3" class="reportSpanItem">
              {{ $t('modules.report.reject_time') }}: {{ confirmTime }}
            </div>
            <div v-if="confirmState === 4" class="reportSpanItem">
              {{ $t('modules.report.invalid_time') }}: {{ confirmTime }}
            </div>
          </div>
        </el-card>
        <!-- 报告详情 -->
        <el-empty v-if="noData" description="Empty" />
        <el-card v-else shadow="never" class="detailItem">
          <!-- 服务提示信息 -->
          <template #header>
            <div v-if="isTip">
              <div
                v-for="item in tipData"
                :key="item.index"
                style="
                  color: #ed4c78;
                  word-break: break-all;
                  overflow: auto;
                  white-space: normal;
                  margin-bottom: 5px;
                "
              >
                <span
                  :class="{
                    point: true,
                    pointRed:
                      item.tipTypeCode == 'PLATFORM_EXPIRE' ||
                      item.tipTypeCode == 'BALANCE_LESS'
                        ? true
                        : false,
                    pointGreen:
                      item.tipTypeCode == 'BUSINESS_INCREASE' ||
                      item.tipTypeCode == 'BUSINESS_DECREASE'
                        ? true
                        : false
                  }"
                />
                <span
                  v-if="item.tipTypeCode == 'PLATFORM_EXPIRE'"
                  style="font-size: 16px; color: #ed4c78"
                  >{{ item.platCode }}
                  {{ $t('modules.report.tip_expire') }}</span
                >
                <span
                  v-if="item.tipTypeCode == 'BALANCE_LESS'"
                  style="font-size: 16px; color: #ed4c78"
                  >{{ item.platCode }}
                  {{
                    $t('modules.report.tip_use_num', {
                      num: item.userTime,
                      left_num: item.leftTimes
                    })
                  }}</span
                >
                <span
                  v-if="item.tipTypeCode == 'BUSINESS_INCREASE'"
                  style="font-size: 16px; color: #00c9a7"
                  >{{
                    $t('modules.report.tip_increase', {
                      method: $t(
                        'contract_statistic.' + item.statisticMethodCode
                      ),
                      platCode: $t('contract_plat.' + item.platCode),
                      ratio: item.ratio,
                      reaching: item.reaching
                    })
                  }}</span
                >
                <span
                  v-if="item.tipTypeCode == 'BUSINESS_DECREASE'"
                  style="font-size: 16px; color: #ed4c78"
                  >{{ item.platCode }}
                  {{
                    $t('modules.report.tip_decrease', {
                      method: $t(
                        'contract_statistic.' + item.statisticMethodCode
                      ),
                      platCode: $t('contract_plat.' + item.platCode),
                      ratio: item.ratio,
                      reaching: item.reaching
                    })
                  }}</span
                >
              </div>
            </div></template
          >
          <div
            v-for="(platItem, index) in platList"
            :key="platItem.platCode"
            class="ulItem"
            style="width: 100%"
          >
            <el-card
              shadow="never"
              :style="{ 'border-top': index !== 0 ? '1px solid #EBEEF5' : '' }"
            >
              <!-- 平台+合同失效日期标签 -->
              <template #header>
                <div class="platItem">
                  {{ $t('contract_plat.' + platItem.platCode) }}
                  <el-tag
                    v-if="platItem.isBind === 1 && platItem.isExpire === 1"
                    class="contract_tag"
                    style="color: #498afd; background: #ebf1ff"
                    size="small"
                    >{{ $t('modules.report.expire_date') }}:{{
                      platItem.expireDate
                    }}</el-tag
                  >
                  <el-tag
                    v-if="platItem.isBind === 1 && platItem.isExpire === 2"
                    class="contract_tag"
                    style="color: #ed4c78; background: #fdebf2"
                    size="small"
                    >{{ $t('modules.report.expire') }}</el-tag
                  >
                  <el-tag
                    v-if="platItem.isBind === 1 && platItem.isExpire === 3"
                    class="contract_tag"
                    type="warning"
                    size="small"
                    >{{ $t('modules.report.expire_date') }}:{{
                      platItem.expireDate
                    }}</el-tag
                  >
                  <el-tag
                    v-if="platItem.isBind === 1 && platItem.expireDate === -1"
                    class="contract_tag"
                    style="color: #00c9a7; background: #e5f9f7"
                    size="small"
                    >{{ $t('modules.report.expire_date') }}:{{
                      $t('modules.report.permanent')
                    }}</el-tag
                  >
                  <el-tag
                    v-if="platItem.isBind === 0"
                    class="contract_tag"
                    style="color: #929db1; background: #f5f5f7"
                    size="small"
                    >{{ $t('modules.report.expire_date') }}:{{
                      $t('modules.report.no_active')
                    }}</el-tag
                  >
                </div></template
              >
              <div
                v-for="moduleItem in platItem.moduleList"
                :key="moduleItem.moduleCode"
              >
                <!-- <div style="margin:15px 20px 20px 20px;border-left:5px solid #2c7be5;font-size:18px;text-indent:7px;font-weight: 500;">{{$t('contract_module.'+moduleItem.moduleCode)}}</div> -->
                <!-- <div v-for="moduleStatisItem in moduleItem.statisticMethodList" :key="moduleStatisItem.statisticMethodCode" style="display:block; margin-left:30px;font-size:16px;color:#9c9c9c;font-weight:600;padding-bottom: 20px;">
                    <div class="el-icon-download downloadLogo" :class="{hidDownload:moduleStatisItem.detailFilePath!==null&&$route.query.reportId===reportId?false:true}" style="margin-right:20px;" @click="downloadDetail(platItem.platCode,moduleItem.moduleCode,moduleStatisItem.statisticMethodCode)"></div>
                    <div style="display:inline-block">{{$t('contract_statistic.'+moduleStatisItem.statisticMethodCode)}}{{ moduleStatisItem.unit }}:</div>
                    <div style="display:inline-block;margin-left:10px;">{{ moduleStatisItem.statisticCount }}</div>
                  </div> -->
                <div
                  v-for="moduleStatisItem in moduleItem.statisticMethodList"
                  :key="moduleStatisItem.statisticMethodCode"
                  class="statisItem"
                >
                  <el-row>
                    <el-col :xs="18" :sm="18" :md="13" :lg="13" :xl="12">
                      <div style="display: inline-block">
                        {{
                          $t(
                            'contract_statistic.' +
                              moduleStatisItem.statisticMethodCode
                          )
                        }}
                      </div>
                    </el-col>
                    <el-col
                      :xs="4"
                      :sm="4"
                      :md="3"
                      :lg="2"
                      :xl="1"
                      style="text-align: right"
                    >
                      <div style="display: inline-block">
                        {{ moduleStatisItem.statisticCount }}
                      </div>
                    </el-col>
                    <el-col
                      :xs="0"
                      :sm="1"
                      :md="1"
                      :lg="1"
                      :xl="1"
                      class="hidden-sm-and-down"
                    >
                      <div
                        v-if="moduleStatisItem.isUp === 1"
                        class="el-icon-top"
                        style="
                          font-weight: 600;
                          position: relative;
                          top: 1px;
                          color: #00c9a7;
                          margin-left: 2px;
                        "
                      />
                      <div
                        v-if="moduleStatisItem.isUp === 0"
                        style="display: inline-block"
                      />
                      <div
                        v-if="moduleStatisItem.isUp === -1"
                        class="el-icon-bottom"
                        style="
                          font-weight: 600;
                          position: relative;
                          top: 1px;
                          color: #ed4c78;
                          margin-left: 2px;
                        "
                      />
                    </el-col>
                    <el-col
                      :xs="0"
                      :sm="6"
                      :md="2"
                      :lg="3"
                      :xl="3"
                      class="hidden-lg-and-down"
                    >
                      <!-- <div  style="display:inline-block;color:black;">{{$t('modules.report.balance')}}:100,000</div> -->
                      <div
                        v-if="moduleStatisItem.balance === null"
                        style="
                          display: inline-block;
                          color: #ed4c78;
                          margin-left: 5px;
                        "
                      />
                      <div
                        v-if="moduleStatisItem.balance !== null"
                        style="
                          display: inline-block;
                          color: #ed4c78;
                          margin-left: 5px;
                        "
                      >
                        {{
                          $t('modules.report.time_left', {
                            num: moduleStatisItem.balance
                          })
                        }}
                      </div>
                    </el-col>
                    <el-col
                      :xs="0"
                      :sm="3"
                      :md="8"
                      :lg="4"
                      :xl="5"
                      class="hidden-md-and-down"
                      style="height: 80px"
                      @click.native="
                        getMaxChart(
                          moduleStatisItem.statisticMethodCode,
                          moduleStatisItem.lineData,
                          moduleStatisItem.lineMonth
                        )
                      "
                    >
                      <lineChart :line-data="moduleStatisItem.lineData" />
                    </el-col>
                    <el-col :xs="2" :sm="2" :md="3" :lg="4" :xl="1">
                      <div
                        v-if="Number(latestReportId) === Number(reportId)"
                        class="downloadLogo"
                        @click="
                          downloadDetail(
                            platItem.platCode,
                            moduleItem.moduleCode,
                            moduleStatisItem.statisticMethodCode
                          )
                        "
                      />
                    </el-col>
                  </el-row>
                  <hr />
                </div>
                <!-- <div v-for="orgItem in moduleItem.orgList" v-show="moduleItem.isShow" :key="orgItem.orgId" class="organization">
                  <div style="margin:15px 35px;border-left:5px solid #c1b35a;font-size:14px;text-indent:10px;font-weight: 500;">Organization {{ orgItem.orgId }}</div>
                  <div style="display:flex;margin-left:40px;font-size:13px;color:#9c9c9c;font-weight:600;padding-bottom: 10px;">
                    <div style="display:inline-block;width:300px">Statistic Method：{{ orgItem.statisticMethodName }}</div>
                    <div style="display:inline-block;width:300px">Statistic quantity{{ orgItem.statisticMethodName }}  ({{ orgItem.unit }})</div>
                 </div>
                </div> -->
              </div>
            </el-card>
          </div>
        </el-card>
      </div>
      <!-- 报告历史 -->
      <el-card class="right" shadow="never">
        <div>
          <el-timeline>
            <el-timeline-item
              v-for="(historyItem, index) in reportHisList"
              :key="historyItem.reportId"
              class="hisItem"
              :timestamp="historyItem.creTime"
              :color="historyItem.color"
              placement="top"
              @click.native="changeReportDetail(historyItem.reportId, index)"
            >
              <div style="padding: 5px">
                <h4 style="display: inline-block">
                  {{
                    $t('modules.report.report_version', {
                      num: hisLength - index
                    })
                  }}
                </h4>
                <el-tag
                  style="display: inline-block; margin-left: 2px"
                  size="small"
                  :type="
                    historyItem.confirmState == '0'
                      ? 'warning'
                      : historyItem.confirmState == '1'
                      ? 'success'
                      : historyItem.confirmState == '2'
                      ? ''
                      : historyItem.confirmState == '3'
                      ? 'danger'
                      : 'info'
                  "
                  >{{
                    historyItem.confirmState == '0'
                      ? $t('modules.report.status_option[0].label')
                      : historyItem.confirmState == '1'
                      ? $t('modules.report.status_option[1].label')
                      : historyItem.confirmState == '2'
                      ? $t('modules.report.status_option[2].label')
                      : historyItem.confirmState == '3'
                      ? $t('modules.report.status_option[3].label')
                      : $t('modules.report.status_option[4].label')
                  }}</el-tag
                >
                <p
                  v-if="historyItem.confirmState === '1'"
                  style="font-size: 11px; color: #cdcdcd; margin-top: 5px"
                >
                  {{
                    $t('modules.report.report_confirm_time', {
                      time: historyItem.confirmTime
                    })
                  }}
                </p>
                <p
                  v-if="historyItem.confirmState === '2'"
                  style="font-size: 11px; color: #cdcdcd; margin-top: 5px"
                >
                  {{
                    $t('modules.report.report_confirm_time', {
                      time: historyItem.confirmTime
                    })
                  }}
                </p>
                <p
                  v-if="historyItem.confirmState === '3'"
                  style="font-size: 11px; color: #cdcdcd; margin-top: 5px"
                >
                  {{
                    $t('modules.report.report_reject_time', {
                      time: historyItem.confirmTime
                    })
                  }}
                </p>
                <p
                  v-if="historyItem.confirmState === '4'"
                  style="font-size: 11px; color: #cdcdcd; margin-top: 5px"
                >
                  {{
                    $t('modules.report.report_invalid_time', {
                      time: historyItem.confirmTime
                    })
                  }}
                </p>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-card>
    </div>
    <!-- 图标展示对话框 -->
    <el-dialog
      v-if="chartVisible"
      :key="dialogMethod"
      :title="$t('contract_statistic.' + dialogMethod)"
      v-model="chartVisible"
      width="40%"
      class="chartDialog"
    >
      <lineDialog :line-data="dialogData" :line-month="dialogMonth" />
    </el-dialog>
    <customer-list
      ref="customerList"
      v-model="customerListVisible"
      @confirmSelect="confirmSelectCustomer"
    />
  </div>
</template>

<script>
import {
  getReportDetail,
  getReportHis,
  regenerateReport,
  getNearData,
  getTip,
  getReportByMonth
} from '@/api/report'
import {
  toTime,
  toStandardYMD,
  getDifferDays,
  toTenYMD,
  toTenStandardYMD
} from '@/utils/index'
import { getToken } from '@/utils/auth'
import lineChart from './components/lineChart'
import lineDialog from './components/lineDialog'
// TODO:　这个要确认下是做什么的
// import 'element-ui/lib/theme-chalk/display.css'
import CustomerList from '@/views/service-management/components/customer-list'

export default {
  components: {
    lineChart,
    lineDialog,
    CustomerList
  },
  data() {
    return {
      customerListVisible: false,
      chartVisible: false,
      loading: false,
      characterCode: '',
      keyId: '',
      statisticMonth: '', // 用于下载文件使用
      rejectReason: '',
      reportId: '',
      confirmTime: 0,
      rejectTime: 0,
      confirmState: 0,
      platList: [],
      endTime: '',
      reportHisList: [],
      hisLength: undefined,
      userName: undefined,
      nearData: undefined,
      tipData: undefined,
      isTip: undefined,
      latestReportId: -1,
      monthList: [],
      month: '',
      noData: false
    }
  },
  mounted() {
    this.getReportDetails(this.$route.query.reportId)
    this.userName = this.$route.query.name
    this.statisticMonth = this.$route.query.month
    this.getInformation(this.$route.query.reportId)
    this.initMonthList()
    // setTimeout(()=>{
    //   this.getReportHistory()
    //   // this.getInformation(this.$route.query.reportId)
    // },500)
  },
  activated() {},
  methods: {
    // 返回
    back() {
      this.$router.back()
    },
    // 获取放大的图标
    getMaxChart(method, data, month) {
      this.dialogMethod = method
      this.dialogData = data
      this.dialogMonth = month
      this.chartVisible = true
    },
    /**
     * 获取m月份前n个月数组
     * @param m 月份 1-12，默认当前月
     * @param n 获取m前多少月，默认 12
     * @param y 年，默认当前年份
     * @returns
     */
    initMonthList(m, n, y) {
      m = m || new Date().getMonth() + 1
      n = n || 24
      y = y || new Date().getFullYear()
      m++
      this.monthList = new Array(n).fill().map(() => {
        if (m > 1) m--
        else {
          y--
          m = 12
        }
        const monthStr = m >= 10 ? m : '0' + m
        return {
          label: `${y}-${monthStr}`,
          value: `${y}${monthStr}`
        }
      })
      // console.log(this.monthList)
    },
    // 获取提示信息
    getInformation(reportId) {
      getTip(reportId)
        .then((res) => {
          if (res.length === 0) {
            this.isTip = false
          } else {
            this.isTip = true
            this.tipData = res
            for (let i = 0; i < res.length; i++) {
              if (res[i].tipType === 2 || res[i].tipType === 3) {
                if (res[i].ratio === null) {
                  if (this.tipData[i].reaching <= 1000) {
                    this.tipData[i].ratio = this.tipData[i].reaching + '%'
                  } else {
                    this.tipData[i].ratio = '>1000%'
                  }
                }
              }
            }
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    // 获取report详情
    getReportDetails(reportId) {
      // 获取当前时间
      let now = new Date()
      now = parseInt(toStandardYMD(now.getTime()))
      this.loading = true
      // 获取近六个月的数据
      const params = {
        monthCount: 6
      }
      getNearData(reportId, params)
        .then((res) => {
          this.nearData = res.statisticCodeVoList
          getReportDetail(reportId)
            .then((res) => {
              // 获取详细信息
              this.characterCode = res.characterCode
              this.keyId = res.keyId
              this.statisticMonth = res.statisticMonth
              this.reportId = reportId
              this.platList = res.platList
              this.confirmState = res.confirmState
              this.rejectReason = res.rejectReason
              this.endTime = toTime(
                parseInt(res.creTime + 60000 * 60 * 24 * 7)
              ).toString()
              this.confirmTime = toTime(parseInt(res.confirmTime)).toString()
              let monthIndex = 0
              for (let i = 0; i < res.platList.length; i++) {
                // 判断合同是否绑定
                if (
                  res.platList[i].supportFlag === null ||
                  res.platList[i].supportFlag === 0
                ) {
                  this.platList[i]['isBind'] = 0
                } else {
                  this.platList[i]['isBind'] = 1
                  // 判断过期时间
                  if (Number(res.platList[i].expireDate) >= 0) {
                    const expireDate = parseInt(
                      toTenStandardYMD(res.platList[i].expireDate)
                    )
                    // console.log('expire',getDifferDays(now,expireDate))
                    if (
                      getDifferDays(now, expireDate) <= 90 &&
                      getDifferDays(now, expireDate) >= 0
                    ) {
                      this.platList[i]['isExpire'] = 3 // 3代表剩余3个月到期
                    } else if (getDifferDays(now, expireDate) < 0) {
                      this.platList[i]['isExpire'] = 2 // 2代表已过期
                    } else {
                      this.platList[i]['isExpire'] = 1 // 1代表正常
                    }
                    this.platList[i].expireDate = toTenYMD(
                      this.platList[i].expireDate
                    )
                  }
                }
                if (res.platList[i].moduleList != null) {
                  for (let j = 0; j < res.platList[i].moduleList.length; j++) {
                    this.platList[i].moduleList[j]['isShow'] = false
                    for (
                      let k = 0;
                      k <
                      res.platList[i].moduleList[j].statisticMethodList.length;
                      k++
                    ) {
                      const length =
                        this.nearData[monthIndex].monthDataVoList.length
                      // 将最近数据整合成数组传入
                      const lineData = new Array()
                      const lineMonth = new Array()
                      for (
                        let n = 0;
                        n < this.nearData[monthIndex].monthDataVoList.length;
                        n++
                      ) {
                        lineData.push(
                          this.nearData[monthIndex].monthDataVoList[n]
                            .statisticCount
                        )
                        lineMonth.push(
                          this.nearData[monthIndex].monthDataVoList[n]
                            .statisticMonth
                        )
                      }
                      this.platList[i].moduleList[j].statisticMethodList[k][
                        'lineData'
                      ] = lineData
                      this.platList[i].moduleList[j].statisticMethodList[k][
                        'lineMonth'
                      ] = lineMonth
                      // 判断递增or递减
                      if (length >= 2) {
                        const temp =
                          this.nearData[monthIndex].monthDataVoList[length - 1]
                            .statisticCount -
                          this.nearData[monthIndex].monthDataVoList[length - 2]
                            .statisticCount
                        if (temp > 0) {
                          this.platList[i].moduleList[j].statisticMethodList[k][
                            'isUp'
                          ] = 1
                        } else if (temp === 0) {
                          this.platList[i].moduleList[j].statisticMethodList[k][
                            'isUp'
                          ] = 0
                        } else {
                          this.platList[i].moduleList[j].statisticMethodList[k][
                            'isUp'
                          ] = -1
                        }
                      } else {
                        this.platList[i].moduleList[j].statisticMethodList[k][
                          'isUp'
                        ] = 0
                      }
                      monthIndex = monthIndex + 1
                      if (
                        this.platList[i].moduleList[j].statisticMethodList[k]
                          .unit === 'number' ||
                        this.platList[i].moduleList[j].statisticMethodList[k]
                          .unit === 'min' ||
                        this.platList[i].moduleList[j].statisticMethodList[k]
                          .unit === 'hour'
                      ) {
                        this.platList[i].moduleList[j].statisticMethodList[
                          k
                        ].unit = ''
                        // this.platList[i].moduleList[j].statisticMethodList[k].statisticCount = this.platList[i].moduleList[j].statisticMethodList[k].statisticCount.split('.')[0]
                      } else {
                        this.platList[i].moduleList[j].statisticMethodList[
                          k
                        ].unit =
                          '(' +
                          this.platList[i].moduleList[j].statisticMethodList[k]
                            .unit +
                          ')'
                      }
                    }
                  }
                }
              }
              this.getReportHistory()
            })
            .catch((err) => {
              this.$message.error(err.message)
              // this.$router.back()
              this.loading = false
            })
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    // 获取当前report的历史记录
    getReportHistory() {
      const params = {
        characterCode: this.characterCode,
        keyId: this.keyId,
        date: this.statisticMonth
      }
      getReportHis(params)
        .then((res) => {
          this.reportHisList = res.reverse()
          this.hisLength = res.length
          for (let i = 0; i < res.length; i++) {
            this.reportHisList[i].creTime = toTime(
              parseInt(res[i].creTime)
            ).toString()
            this.reportHisList[i].confirmTime = toTime(
              parseInt(res[i].confirmTime)
            ).toString()
            this.reportHisList[i]['color'] = ''
            if (this.reportHisList[i].reportId === Number(this.reportId)) {
              this.reportHisList[i]['color'] = '#0074e8'
            }
            if (this.reportHisList[i].confirmState === '3')
              this.reportHisList[i].rejectTime = toTime(
                parseInt(res[i].confirmTime)
              ).toString()
            if (
              this.reportHisList[i].confirmState === '1' ||
              this.reportHisList[i].confirmState === '2'
            )
              this.reportHisList[i].confirmTime = toTime(
                parseInt(res[i].confirmTime)
              ).toString()
            if (
              Number(this.latestReportId) <
              Number(this.reportHisList[i].reportId)
            ) {
              this.latestReportId = this.reportHisList[i].reportId
            }
          }
          this.loading = false
        })
        .catch((err) => {
          this.$message.error(err.message)
          this.loading = false
        })
    },
    formatReportState(state) {
      if (state === 0) {
        return 'warning'
      } else if (state === 1) {
        return 'success'
      } else if (state === 2) {
        return ''
      } else if (state === 3) {
        return 'danger'
      } else {
        return 'info'
      }
    },
    // 点击时间线改变report详情
    changeReportDetail(reportId, index) {
      this.reportId = reportId.toString()
      this.getReportDetails(this.reportId)
      this.getInformation(this.reportId)
      console.log(this.reportId)
      console.log(this.$route.query.reportId)
      console.log(this.$route.query.reportId === reportId)
    },
    getReportDetailByMonth() {
      const params = {
        month: this.statisticMonth,
        characterCode: this.characterCode,
        keyId: this.keyId,
        excludeState: 4
      }
      getReportByMonth(params).then((res) => {
        if (res) {
          this.noData = false
          this.getReportDetails(res.reportId)
        } else {
          this.noData = true
          this.confirmState = ''
          this.reportHisList = null
        }
      })
    },
    openCustomerList() {
      this.customerListVisible = true
      this.$nextTick(() => {
        this.$refs.customerList.openDialog()
      })
    },
    confirmSelectCustomer(customerInfo) {
      this.characterCode = customerInfo.characterCode
      this.keyId = customerInfo.keyId
      this.userName = customerInfo.name
      this.getReportDetailByMonth()
    },
    // 重新生成report
    regenerateReport() {
      // 加个确认
      this.$confirm(this.$t('tip_content.regenerate_report'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      })
        .then(() => {
          const data = {
            characterCode: this.characterCode,
            keyI: this.keyId,
            month: this.statisticMonth
          }
          regenerateReport(data)
            .then((res) => {
              console.log(res)
            })
            .catch((err) => {
              this.$message.error(err.message)
            })
        })
        .catch((e) => {})
    },
    // 下载详情文件
    downloadDetail(platCode, moduleCode, statisticMethodCode) {
      // let params = {
      //   platCode:plat,
      //   moduleCode:module,
      //   statisticMethodCode:statistic,
      //   characterCode:this.characterCode,
      //   date:this.statisticMonth,
      //   keyId:this.keyId
      // }
      // downloadFile(params).then((res)=>{
      //   console.log(res)
      // }).catch((err)=>{
      //   this.$message.error(err.message)
      // })
      window.location.href =
        import.meta.env.VITE_APP_BASE_API +
        '/online/flycare/admin/detail/file/download' +
        '?WEB-TOKEN=' +
        getToken() +
        '&platCode=' +
        platCode +
        '&moduleCode=' +
        moduleCode +
        '&statisticMethodCode=' +
        statisticMethodCode +
        '&characterCode=' +
        this.characterCode +
        '&date=' +
        this.statisticMonth +
        '&keyId=' +
        this.keyId
    }
  }
}
</script>

<style scoped lang="scss">
.reportSpan {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.reportSpanItem {
  display: inline-block;
  margin-right: 50px;
}
.voidedBG {
  background: url('~@/assets/images/flycare/voided.png') no-repeat;
  background-size: 100px 70px;
  z-index: 2;
  background-position: 750px 40px;
  padding-bottom: 10px;
}
.left {
  flex: 1;
  overflow: hidden;
}
.right {
  width: 285px;
  height: 100%;
  position: sticky;
  top: 40px;
}
.arrowIcon {
  float: right;
  font-size: 18px;
}
.el-collapse-item__header {
  flex-direction: column;
  align-items: flex-start;
}
.platItem {
  height: 50px;
  font-size: 20px;
  line-height: 20px;
  font-weight: 700;
  text-indent: 10px;
  position: relative;
}
.ulItem {
  display: inline-block;
  background-color: #ffffff;
}
.module {
  border-bottom: 1px solid #e4e7ed;
}
.organiza {
  border-top: 1px solid #e4e7ed;
}
.hisItem {
  cursor: pointer;
}
.downloadLogo {
  cursor: pointer;
  float: right;
  background: url('~@/assets/images/flycare/download.png') no-repeat;
  background-size: 30px 30px;
  height: 30px;
  width: 30px;
  margin: 25px 10px 25px 10px;
}
.hidDownload {
  visibility: hidden;
}
.statisItem {
  display: block;
  height: 80px;
  margin-left: 30px;
  color: #9c9c9c;
  font-size: 16px;
  font-weight: 400;
  line-height: 80px;
}
.point {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 4px;
  position: relative;
  bottom: 4px;
  margin-right: 10px;
}
.pointRed {
  background-color: #ed4c78;
}
.pointGreen {
  background-color: #00c9a7;
}
.contract_tag {
  // display:block;
  // width:158px;
  // padding:0px;
  position: absolute;
  top: 23px;
  left: 10px;
  padding-right: 15px;
  // margin:5px 0px 0px 10px;
  border: 0px;
}
</style>

<style lang="scss">
.ulItem .el-card {
  border: 0px;
}
.ulItem .el-card__header {
  padding-bottom: 5px;
}
.ulItem .el-card__body {
  padding-top: 0px;
}
.detailItem .el-card__body {
  padding: 0px;
  border: 0px;
}
</style>

